<template>
  <el-container>
<!--    左侧-->
    <el-aside :width="isCollapse ? '64px' : '200px'">
      <div class="menuTitle">@动力云客管理系统</div>
      <el-menu
          active-text-color="#ffd04b"
          background-color="#334157"
          class="el-menu-vertical-demo"
          default-active="2"
          text-color="#fff"
          style="border-right: solid 0px;"
          :collapse="isCollapse"
          :collapse-transition="false"
          :unique-opened="true"
          :router="true"
      >
        <!--市场活动菜单-->
        <el-sub-menu index="1">
          <template #title>
            <el-icon><OfficeBuilding /></el-icon>
            <span>市场活动</span>
          </template>
            <el-menu-item index="1-1">市场活动</el-menu-item>
            <el-menu-item index="1-2">市场统计</el-menu-item>
        </el-sub-menu>

        <!--线索管理菜单-->
        <el-sub-menu index="2">
          <template #title>
            <el-icon><operation /></el-icon>
            <span>线索管理</span>
          </template>
          <el-menu-item index="1-1">线索管理</el-menu-item>
          <el-menu-item index="1-2">线索统计</el-menu-item>
        </el-sub-menu>

        <!--客户管理菜单-->
        <el-sub-menu index="3">
          <template #title>
            <el-icon><location /></el-icon>
            <span>客户管理</span>
          </template>
          <el-menu-item index="1-1">客户管理</el-menu-item>
          <el-menu-item index="1-2">客户管理</el-menu-item>
        </el-sub-menu>

        <!--交易管理菜单-->
        <el-sub-menu index="4">
          <template #title>
            <el-icon><location /></el-icon>
            <span>交易管理</span>
          </template>
          <el-menu-item index="1-1">交易管理</el-menu-item>
          <el-menu-item index="1-2">交易管理</el-menu-item>
        </el-sub-menu>

        <!--产品管理菜单-->
        <el-sub-menu index="5">
          <template #title>
            <el-icon><location /></el-icon>
            <span>产品管理</span>
          </template>
          <el-menu-item index="1-1">交易管理</el-menu-item>
          <el-menu-item index="1-2">交易管理</el-menu-item>
        </el-sub-menu>

        <!--字典管理菜单-->
        <el-sub-menu index="6">
          <template #title>
            <el-icon><location /></el-icon>
            <span>字典管理</span>
          </template>
          <el-menu-item index="1-1">交易管理</el-menu-item>
          <el-menu-item index="1-2">交易管理</el-menu-item>
        </el-sub-menu>

        <!--用户管理菜单-->
        <el-sub-menu index="7">
          <template #title>
            <el-icon><location /></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="/dashboard/user">用户管理</el-menu-item>
        </el-sub-menu>

        <!--系统管理菜单-->
        <el-sub-menu index="8">
          <template #title>
            <el-icon><location /></el-icon>
            <span>系统管理</span>
          </template>
          <el-menu-item index="1-1">交易管理</el-menu-item>
          <el-menu-item index="1-2">交易管理</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>
<!--    右侧-->
    <el-container class="rightContent">
<!--      上-->
      <el-header>
        <el-icon class="show" @click="showMenu"><Fold /></el-icon>

        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            {{user.name}}<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="a">我的资料</el-dropdown-item>
              <el-dropdown-item command="b">修改密码</el-dropdown-item>
              <el-dropdown-item command="e" divided @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
<!--      中-->
      <el-main>
        <router-view v-if="isRouterAlive"/>
      </el-main>
<!--      下-->
      <el-footer>@版权所有 2009-2099 动力节点 北京市通州区马驹桥镇景中街17号顺景总部公元B4栋</el-footer>
    </el-container>
  </el-container>
</template>

<script>
import {OfficeBuilding, Operation} from "@element-plus/icons-vue";
import {doGet, messageConfirm} from "../http/httpRequest.js";
import {messageTip, removeToken} from "../util/util.js";

export default {
  //定义组件名
  name: "DashboardView",
  components: {Operation, OfficeBuilding},
  data() {
    return {
      //控制左侧菜单左右的展开和折叠，true是折叠，false是展开
      isCollapse : false,
      //登录用户对象，初始值为空
      user : {},
      //控制仪表盘页面右侧内容体是否显示
      isRouterAlive : true
    }
  },
  //提供者（生产者）
  provide() { //提供之后，在其他子页面就可以使用（多级页面的数据穿透）
    return {
      //提供一个函数，要求是箭头函数
      reload: ()=> {
        this.isRouterAlive = false;//右侧内容隐藏
        this.$nextTick(function () {//$nextTick(),当数据更新了，在dom中渲染后，自动执行该函数
          this.isRouterAlive = true;
        })
      }
    }
  },
  //vue生命周期中的一个函数钩子，该钩子是在页面渲染后执行
  mounted() {
    //加载当前登录用户
    this.loadLoginUser();
  },

  methods: {
    //左侧菜单左右展开和折叠
    showMenu() {
      this.isCollapse = !this.isCollapse;
    },
    //加载当前用户
    loadLoginUser() {
      doGet("/api/login/info",{}).then( (rep) => {
        this.user = rep.data.data;
      })
    },
    //退出登录
    logout() {
      doGet("/api/logout", {}).then(resp => {
        if (resp.data.code === 200){
          removeToken();//删除token
          messageTip("退出成功","success");
          //跳转登录页
          window.location.href = "/";
        } else {//后台可能会出现redis删除token失败的情况
          //给前端用户提示，并且跳转页面
          messageConfirm("退出异常，是否强行退出？")
              .then(() => {//用户点确定触发then函数
                //既然后端验证token都不通过了，直接在跳转页面前把这个token删了，没必要再存着带回去浏览器了，造成缓存垃圾
                removeToken();
                //跳转登录页
                window.location.href = "/";
              })
              .catch(() => {//点取消触发catch函数
                messageTip("ok，再等等","warning");
              })
        }
      })
    }
  }
}
</script>

<style scoped>
  .el-aside{
    background: #1a1a1a;
  }
  .el-header{
    background: azure;
    height: 35px;
    /*上下居中*/
    line-height: 35px;
  }
  .el-footer{
    background: aliceblue;
    height: 35px;
    /*左右居中*/
    text-align: center;
    /*上下居中*/
    line-height: 35px;
  }
  .rightContent{
    height: calc(100vh);
  }
  .menuTitle{
    height: 35px;
    color: #f9f9f9;
    /*左右居中*/
    text-align: center;
    /*上下居中*/
    line-height: 35px;
  }
  .show{
    cursor: pointer;
  }
  .el-dropdown{
    float: right;
    /*上下居中*/
    line-height: 35px;
  }
</style>